
<template>
    <div class="app-container">
        <levelbar></levelbar>
        <div class="tableBox">
            <div class="table-title" slot="table-title">
                <div>
                    <el-button  @click="checkElect" :disabled="disabledElect">查看电板</el-button>
                    <el-button  @click="addElect">添加电板</el-button>
                </div>
                <div>
                    <el-button  @click="goback">返回</el-button>
                </div>
            </div>
            <el-table :data="dataApply" style="width: 100%" ref="singleTable" border v-loading="loading">

                <el-table-column label="班级" align="center" prop="className"> 
                    <template scope="scope">
                        <span>{{scope.row.className | isNull}}</span>
                    </template>
                </el-table-column>
               
                <el-table-column label="继电器/喇叭编号" align="center">
                    <template scope="scope">
                        <span>{{scope.row.channelNumber || '--'}}</span>
                    </template>
                </el-table-column>

                <el-table-column align="left" label="操作" width="300">
                    <template scope="scope">
                        <el-button type="text" class="btn-success" v-if="scope.row.channelNumber" @click="resetting(scope.row.mapId,scope.row.className)">重置</el-button>
                        <el-button type="text" class="btn-success" v-if="!scope.row.channelNumber" @click="configureDevice(scope.row)">配置</el-button>
                    </template>
                </el-table-column>   
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listQuery.total"
                    :current-page.sync="listQuery.page"
                    :page-sizes="config.pageSizes"
                    :page-size="config.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </div>

        <addElect ref="addElect" :verElect="verElect" v-if="verElect.dialogAddVersion" @success="success"></addElect>

        <configure ref="configure" :configureit="configureit" v-if="configureit.dialogAddVersion" @success="successConfigure"></configure>

        <el-dialog title="电板列表" :visible.sync="dialogFormVisible" size="small">
            <div class='checkImg2'>
                <table class='dialogTable' align="left">
                    <tr><th>电板类型</th><th>电板地址</th><th>电板名称</th><th class="creatTime">创建时间</th><th class="opreate" style="text-align:left">操作</th></tr>
                    <tr v-for='(item,index) in electList' :key="index">
                        <td>{{electList[index].relayType=='0' ? '石榴仔' : '无线调频'}}</td>
                        <td>{{electList[index].relayNumber==null ? '/' : electList[index].relayNumber}}</td>
                        <td>{{electList[index].relayName}}</td>
                        <td>{{electList[index].createTime}}</td>
                        <td style="text-align:left"><el-button type="text" class="btn-success" @click="deleteRelay(electList[index].relayId)">删除</el-button></td>
                    </tr>
                </table>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogFormVisible=false">确 定</el-button>
            </div>
        </el-dialog> 
    </div>
</template>

<script>
import Levelbar from '../layout/Levelbar';
import {query, listPanels, getReset, deletePanels} from 'api/attendanceManage';
import TableLayout from 'components/TableLayout';
import addElect from './comps/addElect';
import configure from './comps/configure';
import { mapState, mapActions} from 'vuex';
export default{
    name: 'classSetUp',
    components: {TableLayout, Levelbar, addElect, configure},
    data() {
        return {
            dataApply: [],
            loading: true,
            relayLoading: false,
            disabledElect: true,
            electList: [],
            relayName: '',
            dialogFormVisible: false,
            listQuery: {// 分页
                page: 1,
                total: 0
            },
            verElect: {
                dialogAddVersion: false
            },
            configureit: {
                dialogAddVersion: false
            }
        }
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        })
    },
    created() {
        this.getElect();
        this.searchFetchData();
    },
    
    methods: {
        ...mapActions(['ChangePageSize']),
        searchFetchData() {
            this.loading = true;
            let pid = this.$route.params.id.split(';')[0];
            let schoolId = this.$route.params.id.split(';')[1]
            query(this.listQuery.page, this.config.pageSize, schoolId, pid).then(response => {
                if (response.data.content.length==0) {
                    this.disabledElect = true;
                    this.dataApply = [];
                    this.listQuery.total = 0;
                } else {
                    this.disabledElect = false;
                    this.dataApply = response.data.content.list;
                    this.listQuery.total = response.data.content.pagination.total;
                }
                this.loading = false;
            });
        },
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.loading = true;
            this.ChangePageSize(val);
            this.searchFetchData();
        },
        handleCurrentChange(val) {    
            this.listQuery.page = val;
            this.searchFetchData();
        },
        // 重置
        resetting(mapId, className) {
            this.$confirm('如需重置，请解除相关班级和继电器的绑定关系，在未配置班级重新绑定。', ' ', {
                confirmButtonText: '重置',
                cancelButtonText: '取消'
            }).then(() => {
                this.$confirm('确认解绑班级【'+className+'】设备？', ' ', {
                    confirmButtonText: '解绑',
                    cancelButtonText: '取消'
                }).then(() => {
                    getReset(mapId).then(res => {
                        this.$message.success('重置成功');
                        this.searchFetchData();
                    })
                }).catch(() => {
                    this.$message.info('已取消');
                });
            }).catch(() => {
                this.$message.info('已取消');
            });
        },
        deleteRelay(relayId) {
            this.$confirm('删除电板，同时会解除该电板上继电器和班级的绑定关系，确定删除么？', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                deletePanels(relayId).then(res => {
                    this.$message.success('该电板已删除');
                    this.getElect();
                    this.searchFetchData();
                })
            }).catch(() => {
                this.$message.info('已取消');
            });
        },
        onSubmit() {// 表单查询
            this.loading = true;
            this.searchFetchData();
        },
        success() {
            this.getElect();
            this.searchFetchData();
        },
        successConfigure() {
            this.searchFetchData();
        },
        addElect() {
            this.verElect.dialogAddVersion = true;
        },
        configureDevice(row) {
            this.configureit.schoolId = row.schoolId;
            this.configureit.deviceId = row.deviceId;
            this.configureit.classId = row.classId;
            this.configureit.dialogAddVersion = true;
        },
        getElect() {
            this.relayLoading = true;
            let deviceId = this.$route.params.id.split(';')[2];
            let schoolId = this.$route.params.id.split(';')[1];
            listPanels(schoolId, deviceId).then(res => {
                this.electList = res.data.content;
                this.relayLoading = false;
                if (this.electList==null) {
                    this.dialogFormVisible = false;
                } else {
                    this.configureit.relayType = this.electList[0].relayType;
                    this.configureit.relayId = this.electList[0].relayId;
                }
            })
        },
        checkElect() {
            this.dialogFormVisible = true;
            this.getElect();
        },
        goback() {
            window.history.back();
        }
    }
}
</script>

<style lang="scss" scoped>
.app-container {
    position: relative;
    padding: 20px 20px 10px;
    .tableBox{
        padding: 0 20px;
        background: #fff;
        box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.1); 
        -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    }
    .pagination-container p{
        color:#b2b2b2;
        font-size:14px;
        margin-top:25px;
        margin-left:20px;
    }
    .table-title {
        display: flex;
        justify-content: space-between;
        padding: 13px 0;
        .table-title-span {
            flex: 1;
        }
    }
    .dialog-footer{
        .el-button{
            margin: 50px 0 10px 0;
        }
        text-align: center;
    }
    .dialogTable{
        text-align:center;
        margin-top:30px;
        margin: 30px 5%;
        width: 90%;
        th{
            background:#f3f3f3;
        }
        td,th{
            text-align:center;
            padding:0 20px;
            border: solid 1px #ECECEC;
            height:40px;
            .creatTime{
                width:25%;
            }
            .opreate{
                width:15%;
            }
        }
    }
}

</style>
